<template>
  <header class="header_box">
    <div class="logo_box">未来空间</div>
    <nav class="nav_box">
      <nav>Home</nav>
      <nav>Blog</nav>
      <nav>About</nav>
      <nav>Contact</nav>
    </nav>
  </header>
</template>

<script setup lang="ts">
// interface data {
//   count: number;
// }
// export default {
//   data(): data {
//     return {
//       count: 0,
//     };
//   },
//   mounted() {
//     // let timer = setInterval(() => {
//     //     this.count++
//     // }, 2000)
//   },
// };

import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";
const store = useCounterStore();
const { name, age, count } = storeToRefs(store);
</script>

<style scoped lang="scss">
@font-face {
  font-family: "jianhao";
  src: url("../assets/jianhao.ttf") format("truetype");
}
.header_box {
  width: 1200px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #66c4ff;
  border-radius: 10px;

  box-shadow: 5px 5px 15px #bbb;
  .logo_box {
    font: {
      family: "jianhao";
      size: 40px;
    }
    // color: #fce441;
    color: white;
    text-shadow: 5px 5px 15px #333;
    margin-left: 20px;
    &:hover {
      cursor: pointer;
    }
  }

  .nav_box {
    width: 400px;
    display: flex;
    font-size: 14px;
    color: azure;

    justify-content: space-around;
    align-items: center;
    nav {
      cursor: pointer;
      // transition: top 3s linear;
      &:hover {
        position: relative;
        top: -2px;
        // color: #6482e0;
        
      }
    }
  }
}
</style>
